﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>记事本</title>
    <link href="../../WF/Portal/layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="../../WF/Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../WF/Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/config.js" type="text/javascript"></script>
    <script src="../../WF/Comm/Gener.js" type="text/javascript"></script>
    <script src="../../WF/Portal/layui/layui.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <script src="../../WF/Portal/js/vue/vue.js" type="text/javascript"></script>
    <style>
        body {
            background: #fff
        }

        .note-header {
            padding: 15px 0px;
        }

        .note-nav {
        }

        .note-nav h2 {
            border-left: 2px solid #009688;
            display: inline-block;
            padding-left: 10px;
            font-weight: bold;
            font-size: 16px;
        }

        .note-nav p {
            line-height: 24px;
            color: #808080;
            margin-top: 10px;
        }

        .nyellow {
            color: #ef9411;

        }

        .note-form {
            border: 2px solid #009688;
            border-left: 0px;
            border-right: 0px;
            margin-bottom: 15px;
            background: #f6fefd;
            padding: 0px 10px;
        }

        .form-title {
            line-height: 30px;
            font-size: 16px;
            padding: 10px 0px;
        }

        .form-title span {
            float: right;
        }

        .note-footer {
            padding: 15px;
            background: #efefef
        }
        .note-footer .layui-card-body li span{ font-size:12px; color:#808080; font-style:italic
        }
        .fr {
            float: right
        }
        .note-list {
           max-height:360px;
           overflow-y:auto
        }
        .note-box {
            border: 1px solid #d6fcf8;
            margin: 10px 0px;
            box-shadow: 0px 2px 2px #d3eeeb;
            padding: 6px 11px;
        }
            .note-box .fr {
            opacity:0;}
            .note-box:hover .fr {
            opacity:1}

            .note-box:hover {
                border: 2px solid #009688;
                padding: 10px;
                opacity: 1;
            }

            .note-box > .title {
                line-height: 32px;
            }

                .note-box > .title > .tt {
                    font-size: 16px;
                    
                }

                    .note-box > .title > .tt i {
                        cursor: pointer;
                        color: #808080
                    }

            .note-box > .nav {
                color: #808080;
                padding: 0px 0px 0px 20px;
                font-size:12px;
            }

            .note-box > .info {
                padding: 0px 10px 10px 20px;
                font-size: 14px;
            }

        .nyellow i {
            color: #ffd800 !important
        }

        .editWindows {
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            position: fixed;
            top: 0px;
            left:0px;
        }

        .editbox {
            background: #fff;
            width: 80%;
            height: 60%;
            padding: 0 5%;
            margin: 10% 0 0 5%
        }

        .editTitle {
            line-height: 32px;
            font-weight: bold;
            border-bottom: 1px solid #efefef;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="layui-fluid" id="notevue">
        <div class="note-header">
            <div class="note-nav">
               
                <h2>记事本</h2>
                <p>记录想法、文章、心情。</p>

            </div>
        </div>
        <div class="note-form">
            <div class="form-title">写记事</div>
            <form class="layui-form" action="">
                <div class="layui-form-item">

                    <textarea name="TB_Docs" id="TB_Docs" placeholder="请输入记事内容..." class="layui-textarea"></textarea>

                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit lay-filter="formNote">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
        <div class="note-footer">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-sm6 ">
                    <div class="layui-card">
                        <div class="layui-card-header"><strong>最近记事</strong></div>
                        <div class="layui-card-body">                        
                            <div class="note-list"  >
                                <div class="note-box" v-for="(item,index) in notelist">
                                    <div class="title">
                                        <div class="fr">
                                            <span @click.stop="EidtNote(item.MyPK),Isedit=true" class="layui-btn layui-btn-xs">编辑</span>
                                            <span @click.stop="Delnote(item.MyPK)" class="layui-btn layui-btn-danger  layui-btn-xs">删除</span>
                                        </div>
                                        <div :class="item.IsStar ? 'tt nyellow':'tt'" :id="item.MyPK">
                                            <i class="layui-icon layui-icon-star-fill" @click.stop="StarType(item.MyPK)"></i>
                                            {{item.Name}}
                                        </div>
                                    </div>
                                    <div class="nav">
                                        <span>{{item.RDT}}</span>
                                    </div>
                                    <div class="info">
                                        {{item.Docs}}
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <div class="layui-card">
                        <div class="layui-card-header"><strong><i class="layui-icon layui-icon-star-fill nyellow"></i> 星标记事</strong></div>
                        <div class="layui-card-body">
                            <div class="note-list">
                                <div class="note-box" v-for="(item,index) in noteStar">
                                    <div class="title">
                                        <div class="fr">
                                            <span @click.stop="EidtNote(item.MyPK),Isedit=true" class="layui-btn layui-btn-xs">编辑</span>
                                            <span @click.stop="Delnote(item.MyPK)" class="layui-btn layui-btn-danger  layui-btn-xs">删除</span>
                                        </div>
                                        <div :class="item.IsStar ? 'tt nyellow':'tt'" :id="item.MyPK">
                                            <i class="layui-icon layui-icon-star-fill" @click.stop="StarType(item.MyPK)"></i>
                                            {{item.Name}}
                                        </div>
                                    </div>
                                    <div class="nav">
                                        <span>{{item.RDT}}</span>
                                    </div>
                                    <div class="info">
                                        {{item.Docs}}
                                    </div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="editWindows" v-if="Isedit"  @click.stop="Isedit=false">
            <div class="editbox" @click.stop="Isedit=true">
                <div class="editTitle">编辑记事本</div>
                <div class="layui-form-item">
                    <label class="layui-form-label">主题</label>
                    <div class="layui-input-block">
                        <input type="text" name="TB_Name" id="TB_Name" v-model="editdata.Name" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">正文</label>
                    <div class="layui-input-block">
                        <textarea name="TB_Docs" id="TB_Docs" placeholder="请输入记事内容..." class="layui-textarea">{{editdata.Docs}}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">

                        <input type="checkbox" name="IsStar" id="IsStar" :value="editdata.IsStar" v-model="editdata.IsStar" />{{editdata.star}}星标记事
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <span class="layui-btn" @click.stop="editSave(editdata.MyPK);">保存</span>
                        <span class="layui-btn layui-btn-danger"  @click.stop="Isedit=false">取消</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#notevue',
            data: {
                notelist: [],//记事 
                Isedit: false,
                editdata: [],
                noteStar:[],
            },

            methods: {
                StarType: function (MyPK) {
                    var en = new Entity("BP.CCOA.Notepad", MyPK);
                    en.Retrieve();

                    if (en.IsStar == 0) {
                        $("#" + MyPK).addClass('nyellow')
                        var ens = new Entity("BP.CCOA.Notepad", MyPK);
                        ens.IsStar = 1;
                        ens.Update();

                    } else {
                        $("#" + MyPK).removeClass('nyellow')
                        var ens = new Entity("BP.CCOA.Notepad", MyPK);
                        ens.IsStar = 0;
                        ens.Update();
                    }


                },
                Delnote: function (MyPK) {
                    if (confirm('您确定想删除该记事吗?')) {
                        var endel = new Entity('BP.CCOA.Notepad', MyPK);
                        endel.Delete();
                        location.reload();
                    }
                },
                EidtNote: function (MyPK) {
                    var en = new Entity("BP.CCOA.Notepad", MyPK);
                    console.log(en);
                    this.editdata = en;
                    /*var notelisturl = 'form.htm?MyPK='+ MyPK
                    OpenLayuiDialog(notelisturl, "", 400, false, false, true, false);*/
                },
                editSave: function (MyPK) {

                    var IsStar = 0
                    if ($('#IsStar').val() == 'true' || $('#IsStar').val() == 1) {
                        IsStar = 1
                    }
                    // console.log(IsStar)
                    var ens = new Entity("BP.CCOA.Notepad", MyPK);
                    ens.IsStar = IsStar;
                    ens.CopyForm();
                    ens.Update();
                    this.Isedit = false
                    var en = new Entities("BP.CCOA.Notepads");
                    en.Retrieve();
                    en = en.TurnToArry();
                    this.notelist = en;
                    layer.msg('保存成功')

                },
                openList: function () {
                    var notelisturl = 'list.htm'
                    OpenLayuiDialog(notelisturl, "", 800, false, false, true, false);
                },
                
                See: function (MyPK) {
                    var enSee = new Entity("BP.CCOA.Notepad", MyPK);
                    enSee.Retrieve();
                        layer.open({
                            type: 1
                            , title: enSee.Name //不显示标题栏
                            , closeBtn: false
                            , area: '50%;'
                            , shade: 0.8
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['关闭']
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: '<div style="padding: 15px; line-height: 24px; color: #393D49; font-weight: 500;font-size:14px"><p style="padding: 0px 0px 5px;color: #666; font-weight: 400; font-size:12px;"><i class="layui-icon layui-icon-time"></i> ' + enSee.RDT+'</p>' + enSee.Docs+'</div>'
                       
                        });
                }
            },
            mounted: function () {

                // fix firefox bug
                document.body.ondrop = function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                }


                var ens = new Entities("BP.CCOA.Notepads");
                ens= ens.DoMethodReturnJSON("RetrieveTop30");

                
                var ensStars = new Entities("BP.CCOA.Notepads");
                ensStars = ensStars.DoMethodReturnJSON("RetrieveTop30Stars");
                console.log(ensStars);

                /*var en = new Entities("BP.CCOA.Notepads");
                en.Retrieve();
                en = en.TurnToArry();
                console.log(en);*/
                var notelist = ''
                var noteStar = ''
                this.notelist = ens;
                this.noteStar = ensStars;


            }
        })
        layui.use(['form', 'layer', 'laydate'], function () {
            var form = layui.form, $ = layui.jquery, laydate = layui.laydate;
            form.on('submit(formNote)', function (data) {

                //console.log(data.field);
                var str = $('#TB_Docs').val()
                var en = new Entity("BP.CCOA.Notepad");
                en.CopyForm();
                if (en.Docs == "")
                    return;

                en.Name = str.substr(0, 16)
                en.Insert();

            });
        })
    </script>

</body>
</html>